<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤案例</title>
    <script src="./js/vue.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
    <h1>过滤案例</h1>
    <input type="text" v-model="search" @input="handleInput">
    <ul>
        <li v-for="item in reservelist">
            {{item}}
        </li>
    </ul>

</div>

</body>
<script>
    var mv = new Vue({
        el:"#app",
        data:{
            search :'',
            wordlist:['day1','max','hard'],
            reservelist:['day1','max','hard']
        },
        methods:{
            handleInput(){
                this.reservelist = this.wordlist.filter(item =>{
                    return item.indexOf(this.search)>-1
                    }
                )


                
            }


        }
    })
</script>
</html>